<template>
  <view>
    <city-serach :cities='cities'></city-serach>
    <city-list :cities='cities' :hot='hotCities' :letter='letter'></city-list>
    <city-alpha :cities='cities' @change='handlechange'></city-alpha>
  </view>
</template>

<script>
import CitySerach from './components/serach.vue'
import CityList from './components/list.vue'
import CityAlpha from './components/alpha.vue'
export default {
  name: 'City',
  components: {
    CitySerach,
    CityList,
    CityAlpha
  },
  data () {
    return {
      cities: [],
      hotCities:[],
      letter: ''
    }
  },
  methods: {
    cityinfo () {
      var that = this;
      that.$https('common.cityList', {
      }).then(res => {
        if (res.code === 1) {
          that.cities = res.data;
        }
        if (res.code == 0) {
          that.$u.toast(res.msg);
        }
      });
    },
    handlechange (letter) {
      this.letter = letter
    }
  },
  mounted () {
    this.cityinfo()
  }
}
</script>

<style lang="scss" scoped="">
</style>
